<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>introduction</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
    <p>{{message}}</p>
</div>
<hr>
<div id="app2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<hr>
<div id="app3">
    <p v-if="seen">现在你看到我了</p>
</div>
<hr>
<div id="app4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<hr>
<div id="app5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>
<hr>
<div id="app6">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<hr>
<div id="app7">
    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item_simple></todo-item_simple>
    </ol>
</div>
<hr>
<div id="app8">
    <ol>
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>
</body>
<script type="text/javascript">
    var app1 = new Vue({
        el:"#app1",
        data:{
            message:"Hello Vue!"
        }
    })
    var app2=new Vue({
        el:'#app2',
        data:{
            message:'页面加载于'+new Date().toLocaleString()
        }
    })
    var app3=new Vue({
        el:'#app3',
        data:{
            seen:true
        }
    })
    var app4=new Vue({
        el:'#app4',
        data:{
            todos:[
                {text:'学习 JavaScript'},
                {text:'学习 Vue'},
                {text:'整个牛项目'}
            ]
        }
    })
    var app5=new Vue({
        el:'#app5',
        data:{
            message:'Hello Vue.js'
        },
        methods:{
            reverseMessage:function(){
                this.message=this.message.split('').reverse().join('')
            }
        }
    })
    var app6=new Vue({
        el:'#app6',
        data:{
            message:'Hello Vue.js'
        }
    })
   Vue.component('todo-item_simple', {
        template: '<li>这是个待办项</li>'
   })
   var app7=new Vue({
        el:'#app7'
   })
   Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
   })

   var app8 = new Vue({
        el: '#app8',
        data: {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其它什么人吃的东西' }
            ]
        }
   })
</script>
</html>